<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    输入值：<input type="text" class="input">
    <div class="result">{{ a.b.c }}</div>
  </div>

  <script>
    var person = {
      name: '张三',
      age: 18
    }
    // 第一步：封装 Object.defineProperty 得到一个把对象的某个属性转换成响应式的对象
    // function defineReactive(data, key, val) {
    //   Object.defineProperty(data, key, {
    //     enumerable: true,
    //     configurable: true,
    //     get: function() {
    //       console.log(`获取值：${val}`)
    //       return val
    //     },
    //     set: function(newVal) {
    //       console.log(`设置值：${newVal}`)
    //       if (val === newVal) return
    //       val = newVal
    //     }
    //   })
    // }

    // 第二步：实现观察者 -> 遍历把对象的所有键设置为响应式，实现 observe 方法，把方法封装成 Observer 类
    // function observe(data) {
    //   if (typeof data !== 'object' || data === null) {
    //     throw new TypeError('param must be a object')
    //   }
    //   Object.keys(data).forEach(key => defineReactive(data, key, data[key]))
    // }
    // observe(person)
  </script>

  <script type="module">
    // 1.很重要的一点，两个 script 标签里面的内容是互通的，这里可以读到 person
    // 2.设置 type="modeule" 表示代码会被解析成 javascript，这里面就可以使用比 es5 更高级的语法
    // import { Observer } from './js/Observer.js'
    // new Observer(person)
    // console.log(person.name)
    // person.age = 20
    // console.log(person.age)

    import MyVue from './js/MyVue.js'

    var app = new MyVue({
      el: '#app',
      data: {
        a: {
          b: {
            c: 5
          }
        }
      }
    })

    console.log(app)
    let input = document.querySelector('.input')
    input.addEventListener('input', (e) => {
      app.a.b.c = e.target.value
      console.log(app)
    })
  </script>
</body>
</html>